<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>添加读者页面</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layui/css/modules/laydate/default/laydate.css">
  <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
  <style>
      body {
          padding: 20px;
      }

      .demo-input {
          padding-left: 10px;
          height: 38px;
          min-width: 262px;
          line-height: 38px;
          border: 1px solid #e6e6e6;
          background-color: #fff;
          border-radius: 2px;
      }

      .demo-footer {
          padding: 50px 0;
          color: #999;
          font-size: 14px;
      }

      .demo-footer a {
          padding: 0 5px;
          color: #01AAED;
      }
  </style>
</head>
<body>
<form class="layui-form" id="addbook" lay-filter="example">
  <div class="layui-form-item">

    <div class="layui-inline">
      <label class="layui-form-label">借阅号：</label>
      <div class="layui-input-inline">
        <input type="hidden" name="id" value="${reader.id}">
        <input type="text" name="readerId" id="readerId" value="${reader.readerId}" lay-verify="required"
               autocomplete="off" class="layui-input">
      </div>
      <div class="layui-inline">
        <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
      </div>
      <div class="layui-inline">
        <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">姓名：</label>
      <div class="layui-input-inline">
        <input type="text" name="name" lay-verify="required" value="${reader.name}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <c:set var="sex" value="${reader.sex}"/>
      <label class="layui-form-label">性别：</label>
      <div class="layui-input-block">
        <select name="sex" id="sex" lay-verify="required">
          <option value="">请选择性别</option>
          <option value="1" <c:if test="${reader.sex=='1'}">selected</c:if>>男</option>
          <option value="0" <c:if test="${reader.sex=='0'}">selected</c:if>>女</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">出生日期：</label>
      <div class="layui-input-inline">
        <input type="text" name="birthday" lay-verify="required" value="${reader.birthday}" autocomplete="off"
               class="layui-input" id="birthday">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">联系电话：</label>
      <div class="layui-input-inline">
        <input type="text" name="telephone" lay-verify="required" value="${reader.telephone}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">可借图书：</label>
      <div class="layui-input-inline">
        <input type="text" name="cardState" lay-verify="required" value="${reader.cardState}" autocomplete="off"
               class="layui-input">
      </div>
    </div>
  </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">地址：</label>
    <div class="layui-input-block">
      <textarea style="width:600px; height:150px" placeholder="请输入详细地址" name="address" lay-verify="required"
                class="layui-textarea">${reader.address}</textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <c:if test="${reader==null}"><!-- 查看是没有添加按钮的 -->
      <button class="layui-btn" lay-submit lay-filter="addReader">立即添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </c:if>
      <!-- 修改需要修改按钮是没有添加按钮的 -->
      <c:if test="${code==1}">
        <button class="layui-btn" lay-submit lay-filter="updateReader">立即修改</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </c:if>
    </div>
  </div>
</form>

</body>

<script type="text/javascript" src="../../layui/modules/laydate.js"></script> <!-- 要在layui 的前边不然时间插件失效 -->
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">

	layui.use(['layer', 'jquery', 'laydate', 'form'], function () {
		let layer = layui.layer;
		let $ = layui.jquery;
		let laydate = layui.laydate;
		let form = layui.form;

		// 执行一个时间插件实例
		laydate.render({
			elem: '#birthday'
		})

		// 获取数据，新增读者
		form.on('submit(addReader)', function (data) {
			// 进行输入数据的基本验证
			if (!new RegExp('^[0-9]*$').test(data.field.readerId)) {
				layer.msg("借阅号只能是数字类型！")
				return false;
			}
			if (!new RegExp('^1\\d{10}$').test(data.field.telephone)) {
				layer.msg("联系电话不符合格式！")
				return false;
			}
			$.ajax({
				url: '${pageContext.request.contextPath}/reader/addReader',
				data: data.field,
				method: 'POST',
				dataType: 'json',
				success: function (res) {
					if (res.success) {
						layer.alert(res.message, function (index) {
							window.parent.location.reload();
							parent.layer.close(index)
						})
					} else {
						layer.msg(res.message);
					}
				}
			})
			// 阻止表单的action提交方式
			return false;
		})

		// 验证新添加的reader是否已存在（失去焦点）
		$('#readerId').blur(function () {
			let readerId = $(this).val();
			$.ajax({
				url: '${pageContext.request.contextPath}/checkReader',
				data: {readerId: readerId},
				dataType: 'json',
				method: 'POST',
				success: function (res) {
					if (res.success) {
						$('#ri').removeAttr('hidden');
						$('#wr').attr('hidden', 'hidden');
					} else {
						$('#wr').removeAttr('hidden');
						$('#ri').attr('hidden', 'hidden');
						layer.msg(res.message);
					}
				}
			})
		})

    // 对读者信息进行变更
    form.on('submit(updateReader)', function (data){
	    // 进行输入数据的基本验证
	    if (!new RegExp('^[0-9]*$').test(data.field.readerId)) {
		    layer.msg("借阅号只能是数字类型！")
		    return false;
	    }
	    if (!new RegExp('^1\\d{10}$').test(data.field.telephone)) {
		    layer.msg("联系电话不符合格式！")
		    return false;
	    }
	    $.ajax({
        url: '${pageContext.request.contextPath}/reader/updateReader',
        data: data.field,
        dataType: 'json',
        method: 'POST',
        success: function (res){
        	if (res.success){
        		layer.alert(res.message, function (index){
        			window.parent.location.reload();
        			parent.layer.close(index)
            })
          } else {
        		layer.msg(res.message);
          }
        }
      })
      return false;
    })


	})
</script>

</html>
